<template>
	<view class="register">
		<view class="item">
			<text class="required label">合同标题</text>
			<native_input1 @input="inputDelegator('hetongBiaoTi', $event)" placeholder="请输入合同标题" />		
		</view>
		<view class="item">
			<text class="required label">提货方式</text>
			<view class="address" :class="tihuoFangshi ? '':' placeholder'">
				<picker @change="selectArea" :value="index" :range="array">
					{{tihuoFangshi ? tihuoFangshi : '请选择提货方式'}}
					<image src="/static/images/login/right_arrow.png" class="global_right_arrow_style" />
				</picker>
			</view>
		</view>
		<view class="item">
			<text class="required label">销售合同</text>
			<view class="address" :class="hetongName ? '':' placeholder'">
				<picker @change="selectHetong" :value="index1" :range="hetongList">
					{{ hetongName ? hetongName : '请选择销售合同'}}
					<image src="/static/images/login/right_arrow.png" class="global_right_arrow_style" />
				</picker>
			</view>
		</view>
		<view class="item">
			<text class="required label">提货人/联系人</text>
			<native_input1 @input="inputDelegator('lianxiren', $event)" placeholder="请选择联系人"  />
		</view>
		<view class="item">
			<text class="required label">联系方式</text>
			<native_input1 @input="inputDelegator('lianxiFangshi', $event)" placeholder="请输入联系方式" type="number" />
		</view>
		<view class="item">
			<text class="required label">提货授权开始日期:</text>
			<view class="address" :class="hetongstartTime ? '':' placeholder'">
				<picker  mode="date" :value="date" :start="startDate" :end="endDate" @change="selectStartDateView">
					{{ hetongstartTime ? hetongstartTime : '请选择开始日期'}}
					<image src="/static/images/login/right_arrow.png" class="global_right_arrow_style" />
				</picker>

			</view>
		</view>
		<view class="item">
			<text class="required label">提货授权结束日期:</text>
			<view class="address" :class="hetongendTime ? '':' placeholder'">
				<picker mode="date" :value="date" :start="startDate" :end="endDate" @change="selectEndDateView">
					{{ hetongendTime ? hetongendTime : '请选择结束日期'}}
					<image src="/static/images/login/right_arrow.png" class="global_right_arrow_style" />
				</picker>

			</view>
		</view>
		
		<view class="item"  v-if="index == 1">
			<text class="required label">物流公司</text>
			<view  class="address" :class="wuliuName ? '':' placeholder'">
				<picker @change="selectWuliu" :value="index3" :range="wuliuList">
					{{ wuliuName ? wuliuName : '请选择物流公司'}}
					<image src="/static/images/login/right_arrow.png" class="global_right_arrow_style" />
				</picker>
			</view>
		</view>
		
		<view class="item noborder" v-if="index == 0 " >
			<text class="required label" >身份证正面</text>
			<HbUpload @updateURL="updateURL($event, 'ying_url')" tipText="身份证正面示意图" :url='ying_url.imgUrl' example='/static/images/company/shenfenInside.png' />
			<view class="tip" v-if="!ying_url.imgUrl">请上传营法人身份证头像面，提交后不可更改。</view>
		</view>

		<view class="item noborder"  v-if="index == 0 ">
			<text class="required label">身份证反面</text>
			<HbUpload @updateURL="updateURL($event, 'shengFen_url')" tipText="身份证反面照示意图" :url='shengFen_url.imgUrl' example='/static/images/company/shenfengoutSide.png' />
			<view class="tip" v-if="!shengFen_url.imgUrl" >请上传营法人身份证反面，提交后不可更改。</view>
		</view>
		<view class="item"  v-if="index == 0 ">
			<text class="required label">身份证编号:</text>
			<native_input1 @input="inputDelegator('shenfenzhenghao', $event)" placeholder="请输入身份证编号" type="number" />
		</view>
		<view class="item">
			<text class="required label" >提货仓库:</text>
			<view class="address" :class="cangkuName ? '':' placeholder'">
				<picker  @change="selectCangku" :value="index2" 
				 :range="cangkuList"  >
					{{ cangkuName ? cangkuName : '请选择提货仓库'}}
					<image src="/static/images/login/right_arrow.png" class="global_right_arrow_style" />
				</picker>
			</view>
		</view>
		<view class="item">
			<text class="required label">备注:</text>
			<native_input1 @input="inputDelegator('beizhu', $event)" placeholder="请输入备注" />
		</view>
		<view class="item">
			<view class="BGView">商品信息</view>
		</view>
		
		<view class="fund_detail">
			<view class='list' v-for="(item, index) in list" :key="item.changeTime">
			  <view class='side_left'>
			    <text class='title'>{{item.productName}}</text>
			    <text class='balance'>
			      商品规格：<text class='balance_money'>{{item.spec}}</text>
			    </text>
			  </view>
			  <view class='side_right'>
			    <text class='trade'>{{''}}</text>				
				<text class='date'>{{'库存: '}}</text>						
				<input style="border:1px solid #DDDDDD"  class="putTest" v-model="item.qty" type="text" placeholder=" " @input="fors(index,$event)">
			  </view>			  
			</view>
			<view class="empty" v-if="list.length === 0 && showData">
				<image class="icon" src="/static/images/empty.png"></image>
				暂无数据
			</view>
			<LoadingBar2
				:update='updating'
				:refresh="refresh"
				:params="{saleContractId: hetongId?hetongId:'0'}"
				url="pickupSalecontractgoodlist"
				:list="list"
				@bind_list="bindList"/>
		</view>
		<customButton classes="bigBt sure" @tap="submit">提交</customButton>		
	</view>
</template>

<script>
	import native_input1 from '@/common/components/input/index.vue'
	import input_code from '@/common/components/input/input-code/index.vue'
	import customButton from '@/common/components/button/index.vue'
	import HbUpload from './uploadHb/index.vue'
	import LoadingBar2 from '@/common/components/loader/LoadPostBar/index.vue'
	export default {
		components: {
			native_input1,
			customButton,
			input_code,
			HbUpload,
			LoadingBar2
		},
		mounted() {
			this.refresh = !this.refresh
		},
		onReachBottom() {
		  this.updating = !this.updating;
		},
		data() {
			return {
				hetongBiaoTi: '',
				lianxiren: '',
				lianxiFangshi: '',
				shenfenzhenghao: '',
				beizhu: '',
				tihuoFangshi: '',      //提货方式
				hetongName: '',        //合同名称
				hetongList: [],        //合同列表
				hetongstartTime: '',   //合同开始时间
				hetongendTime: '',     //合同结束时间				
				array: ['自提', '物流'],
				index: 0,              //提货index
				index1: 0,             //合同列表index
				index2: 0,             //仓库列表index
				index3: 0,
				cangkuList: [],        //仓库列表
				cangkuName: '',        //仓库名称
				cangkuId: '',
				cangKuResData: [],
				list: [],
				updating: false,
				refresh: false,
				showData: false,
				list: [],
				hetongTempList: [],
				ying_url: {
					imgUrl: ''
				}, // 已上传的营业执照地址
				shengFen_url: {
					imgUrl: ''
				}, //身份证正面
				wuliuList: [],
				wuliuName: '',
				wuliuId: '',
				wuLiuResData: [],
				hetongId: '',
				hetongResData: [],
				proDuctList: [],
                proKunCun: '',								
			}
		},
		onLoad() {
			this.getHetongList();
			this.getWuLiuList();
			this.getCangKuList();
		},
		onShow() {
		},
		methods: {
			fors:function(vv,e) {
			  this.$set(this.list[vv], 'qty', e.target.value)
			},
			// onKeyUserNameInput: function(event) {  				
			//     this.proKunCun = event.target.value  			           
			// },  
			inputDelegator(id, event,item) {
				if (event.target.value) {
					this[id] = event.target.value
					console.log('x哈哈哈哈xxxx=', this.proKunCun)					
				}
			},
			selectArea: function(e) {
				console.log('xxxxx=', e.target.value)
				this.index = e.target.value
				this.tihuoFangshi = this.index == 0 ? '自提' : '物流'
				console.log('fangshi='+this.tihuoFangshi)
				// this.refresh=!this.refresh
			},
			selectHetong: function(e) {
				console.log('hetonglist=', this.hetongList)
				this.index1 = e.target.value
				this.hetongName = this.hetongList[this.index1];
				this.hetongId = this.hetongResData[this.index1].id
				console.log('hetongid=', this.hetongId)
				this.refresh = !this.refresh	
                this.list.splice(0,this.list.length)							
			},
			selectStartDateView:function(e) {
				this.date = e.target.value
				this.hetongstartTime = e.target.value
				console.log('riqi='+this.hetongstartTime)
			},
			selectEndDateView:function(e) {
				this.date = e.target.value
				this.hetongendTime = e.target.value
			},
			selectWuliu:function(e) {
				console.log('this.WuLiuList=', this.wuliuList)
				this.index3 = e.target.value
				this.wuliuName = this.wuliuList[this.index3];
				this.wuliuId = this.wuLiuResData[this.index3].id
			},
			selectCangku:function(e){
				this.index2 = e.target.value
				this.cangkuName = this.cangkuList[this.index2];
				this.cangkuId = this.cangKuResData[this.index2].id
			},
			bindList(list) {
				console.log('haahhaahh=', list)
				this.showData = true
				this.list = list
				// var ids = '';
				// var qty = '';
				// var price = '';
				// for(var a=0;a<list.length;a++){
				// 	ids=list[a].productId;
				// 	qty=list[a].qty;
				// 	price = list[a].taxPrice;					
				// 	this.proDuctList.push({						
				// 	 'productId':ids,
				// 	 'qty':qty,
				// 	 'taxPrice':price
				// 	});
				// }
				// console.log('proDuctList', this.proDuctList)
				
			},
			updateURL(url, key) {
				console.log(url, key)
				this[key] = url
			},
			//获取合同列表
			getHetongList() {
				this.http.POST({
						name: 'salecontract',						
					})
					.then(res => {
						if (res.result === 'success') {	
							this.hetongResData = res.data
							console.log('hetong=', this.hetongList)
							var arr = new Array();
							arr = res.data;
							console.log('arr=', arr)
							var name = '';
							for(var i=0;i<arr.length;i++){
								name=arr[i].title;
								this.hetongList.push(name);
							}
							console.log('result=', this.hetongList)
						}
					})
			},
			//获取wuliu列表
			getWuLiuList() {
				this.http.POST({
						name: 'logisticsWuliu',						
					})
					.then(res => {
						if (res.result === 'success') {	
							this.wuLiuResData = res.data						
							console.log('wuliu=', this.wuliuList)
							var arr1 = new Array();
							arr1 = res.data;
							console.log('arr1=', arr1)
							var name1 = '';
							for(var ii=0;ii<arr1.length;ii++){
								name1=arr1[ii].name;
								this.wuliuList.push(name1);
							}
							console.log('wuliuList', this.wuliuList)
						}
					})
			},
			//获取wcsangku列表
			getCangKuList() {
				this.http.POST({
						name: 'dclistList',						
					})
					.then(res => {
						if (res.result === 'success') {		
							this.cangKuResData = res.data							
							console.log('cangku=', this.cangkuList)
							var arr11 = new Array();
							arr11 = res.data;
							console.log('arr11=', arr11)
							var name11 = '';
							for(var iii=0;iii<arr11.length;iii++){
								name11=arr11[iii].name;
								this.cangkuList.push(name11);
							}
							console.log('cangku', this.cangkuList)
						}
					})
			},
			//保存提交
			submit() {	
				var temp = this.list.map(item => {
				  return {'productId':item.productId,'qty':item.qty,'taxPrice':item.taxPrice}
				  
				})
				
				this.http.POST({
					name: 'pickupSavecontract',
					params: {
						title: this.hetongBiaoTi,
						pickUpType: this.index,
						saleContractId: this.hetongId,
						contact: this.lianxiren,
						mobilePhone: this.lianxiFangshi,
						dcId: this.cangkuId,
						logisticsId: this.wuliuId,
						startTime: this.hetongstartTime,
						endTime: this.hetongendTime,
						pickUserCardFrontName: this.ying_url.absoluteImgUrl,//chuan absolute那个
				        pickUserCardFrontUrl: this.ying_url.imgUrl,
						pickUserCardReverseName: this.shengFen_url.absoluteImgUrl,
						pickUserCardReverseUrl: this.shengFen_url.imgUrl,
						remark: this.beizhu,
						idCard: this.shenfenzhenghao,
						productList:temp
					},
					header: {
						'content-type': 'application/json',					
					}
				}).then(res => {
					if (res.result == 'success') {
						uni.showToast({
							icon: 'success',
							title: '保存成功'
						})
						uni.$emit('update', {}); // 地址列表更新数据
						uni.navigateBack({
							delta: 1
						})
					}
				})
			}
		}
	}
</script>

<style>
	.register {
		background-color: #FFFFFF;
		width: 100%;
		height: 100%;
		border-top: 1upx solid #DDDDDD;
	}

	.register .item {
		flex-wrap: wrap;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 25upx 30upx;
		border-bottom: 1upx solid #DDDDDD;
	}

	.item.noborder {
		border: none
	}

	.item .label {
		font-size: 28upx;
	}

	.item .label::before {
		content: "*";
	}

	.item native_input1 {
		width: 70%;
		text-align: right;
	}

	.item input_code {
		width: 55%;
	}

	.item input_code .wrapper {
		border: none;
		padding: 0upx;
	}

	.item input_code .code {
		position: relative;
		width: auto;
		border: 1upx solid var(--theme-color);
		border-radius: 9999upx;
		padding: 10upx 20upx;
		white-space: nowrap;
	}

	.item input_code .code_retry {
		border: 1upx solid #BBBBBB;
		font-size: 25upx;
	}

	.item.detailAddress native_input1 {
		text-align: left;
		width: 100%;
	}

	.item .address {
		font-size: 28upx;
		color: #999999;
	}

	.item .address.placeholder {
		color: #BBBBBB;
	}

	.item HbUpload {
		width: 100%;
	}

	.item .tip {
		color: #999999;
		font-size: 24upx;
		width: 100%;
		text-align: center;
		padding: 20upx 0upx;
	}

	.register .agreenment {
		color: #999999;
		font-size: 24upx;
		margin-top: 21upx;
		margin-bottom: 80upx;
		display: flex;
		align-items: center;
		justify-content: flex-start;
		padding: 25upx 30upx;
		position: relative;
		padding-left: 72upx;
	}

	.agreenment checkbox {
		position: absolute;
		transform: scale(0.5);
		left: 20upx;
	}

	.agreenment .navigate {
		color: var(--theme-color);
		font-size: 24upx;
	}
	.register .sure {
		border-radius: 0upx;
		position: fixed;
		left: 0upx;
		right: 0upx;
		bottom: 0upx;
	}
	.BGView{
		display: flex;
		font-size: 32rpx;
		width: 100%;
		color: #333333;
		justify-content: center;
		align-items: center;
	}
	.fund_detail {
		background: #FFFFFF;
		min-height: 100vh;
	}
	
	.fund_detail .list {
	  border-top: 3upx solid #DEDEDE;
	  height: 120upx;
	  display: flex;
	  white-space: nowrap;
	  margin: 0upx 20upx;
	  font-size: 28upx;
	}
	.list:nth-child(1) {
		border: none;
	}
	.list .side_left {
	  width: 50%;
	  height: 100%;
	  display: flex;
	  justify-content: space-around;
	  flex-direction: column;
	  align-items: flex-start;	  
	}
	.list .side_left .title {
	  display: flex;
	  color: #666666;
	  font-size: 28rpx;
	  flex-wrap: wrap;	 
	  
	}
	.list .side_left .balance {
	  color: #999999;
	  font-size: 28upx;
	}
	.list .side_left .balance .balance_money {
	  color: #999999;
	}
	.list .side_right {
	  width: 20%;
	  display: flex;
	  /* flex-direction: column; */
	  flex-direction: row;
	  justify-content: space-around;
	  align-items: flex-end;
	  
	}
	.list .side_right .trade {
	  color: #80C269;
	  font-size: 28upx;
	}
	.list .side_right .minus {
	  color: red;
	  font-size: 28upx;
	}
	.list .side_right .date {
	  color: #999999;
	  font-size: 28upx;
	}
	.list .side_right .putTest {
	  color: #999999;
	  top: 5rpx;
	  left: 10rpx;
	  right:80rpx;
	  font-size: 28upx;
	 
	}
	
	.fund_detail .empty {
		width: 100%;
		height: 100vh;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
		color: #999999;
		font-size: 32upx;
		padding-bottom: 270upx;
		box-sizing: border-box;
	}
	.empty .icon {
		width: 300upx;
		height: 300upx;
		margin-bottom: 68upx;
		justify-content: space-between
	}
</style>
